<template>
	<view class="goods-group" :class="themeName" :style="{
      margin: `-${$px2rpx(styles.margin / 2)}rpx`,
      'background-color': styles.content_bg_color,
      'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(
        styles.border_radius_top
      )}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(
        styles.border_radius_bottom
      )}rpx`,
      padding: `${$px2rpx(styles.padding / 2)}rpx`,
    }">
		<view class="goods-lists" :class="{
        larger: content.style == 1,
        perline: content.style == 2,
        swiper: content.style == 3,
        lists: content.style == 4,
      }">
			<view class="goods-wrap" v-for="(item, index) in goods" :key="index" @tap="navigate(item)">
				<view class="goods-item" :style="{
            'background-color': styles.bg_color,
            margin: `${$px2rpx(styles.margin / 2)}rpx`,
            'border-radius': `${$px2rpx(styles.goods_border_radius)}rpx`,
          }">
					<view class="goods-image" :style="
              imageTabStyleHeight != ''
                ? 'padding-top:' + imageTabStyleHeight + 'px;'
                : ''
            ">
						<view class="u-image">
							<u-image :src="item.image" width="100%" height="100%" />
						</view>
					</view>
					<view class="goods-info p-10">
						<view v-if="content.show_title" class="m-b-8 name" :style="{
                color: styles.title_color,
              }">
							<view :class="content.style == 3 ? 'line-1' : 'line-2'">
								{{ item.name }}
							</view>
						</view>
						<view v-if="content.show_goods_tag" class="m-b-8">
							<u-image :src="item.tag_desc" width="80rpx" height="40rpx" v-if="item.tag_desc != ''" />
							<view v-else style="width: 80rpx; height: 40rpx"></view>
						</view>
						<view v-if="content.show_goods_code" class="m-b-8" :style="{
                color: styles.goods_code_color,
              }">
							<view :class="content.style == 3 ? 'line-1' : 'line-2'">
								{{$zhTran('编码')}}：{{ item.code == null ? "" : item.code }}
							</view>
						</view>
						<view v-if="content.show_goods_model" class="m-b-8" :style="{
                color: styles.goods_model_color,
              }">
							<view :class="content.style == 3 ? 'line-1' : 'line-2'">
								{{$zhTran('型号')}}：{{ item.goods_model == null ? "" : item.goods_model }}
							</view>
						</view>
						<view v-if="content.show_goods_stock" class="m-b-8" :style="{
                color: styles.goods_stock_color,
              }">
							<view :class="content.style == 3 ? 'line-1' : 'line-2'">
								{{$zhTran('库存')}}：{{ item.total_stock == null ? "" : item.total_stock }}
							</view>
						</view>
						<view class="flex price-btn flex-wrap">
							<view class="flex-1">
								<view class="flex-1 flex col-baseline">
									<view v-if="content.show_price" class="price weight-bold m-r-10 flex">
										<text :style="{color:styles.price_color}"
											v-if="content.show_price_text">{{$zhTran('销售价')}}：</text>
										<price :content="item.sell_price" :color="styles.price_color" :font-weight="500"
											mainSize="34rpx" minorSize="26rpx" :prefix="content.price_symbol" />
									</view>
									<view v-if="content.show_scribing_price">
										<price :content="item.lineation_price" color="#999999" mainSize="26rpx"
											minorSize="26rpx" :line-through="true" v-if="Number(item.lineation_price)"
											:prefix="content.price_symbol" />
									</view>
								</view>
								<view class="member-price" v-if="content.show_member_price">
									<text :style="{color:styles.member_price_color}"
										v-if="content.show_price_text">{{$zhTran('会员价')}}：</text>
									<price :content="item.member_price" :color="styles.member_price_color"
										:font-weight="500" mainSize="34rpx" minorSize="26rpx"
										:prefix="content.price_symbol" />
								</view>
							</view>
							<view class="cart-icon" @click.native.stop="addCart(item)" v-if="content.show_cart_icon">
								<u-image width="100%" height="100%" :src="$getImageUri(content.cart_icon_url)"
									shape="circle" mode="scaleToFill" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 规格选择Popup -->
		<goods-spec v-model="showGoodsSpec" :defaultInfo="{
        image: spec_image,
        price: spec_price,
        stock: total_stock,
		show_goods_price: 1,
		show_stock: 1,
		show_goods_buycount: 1,
		aux_def_id:aux_def_id,
      }" :buttons="specButtonsList" :spec-list="spec_value" :spec-map="spec_value_list" @cart="handleCartAdd"
			:prefix="content.price_symbol" :price-key="price_key" />
		<!-- E 规格 -->
	</view>
</template>

<script type="text/javascript">
	import {
		apiCartAdd
	} from "@/api/store";
	import Cache from '@/utils/cache'
	export default {
		components: {},
		props: {
			content: {
				type: [Object, Array],
			},
			styles: {
				type: [Object, Array],
			},
		},
		data() {
			return {
				showGoodsSpec: false, // 商品规格: 显示 | 隐藏
				goodsSpecOptions: {}, // 已选商品规格
				specButtonsList: [{
					event: "cart",
					text: this.$zhTran("加入购物车"),
				}, ], // 规格按钮
				spec_value: [],
				spec_value_list: [],
				spec_image: '',
				spec_price: 0,
				aux_def_id: '',
				total_stock: 0,
				price_key: 'sell_price'
			};
		},
		computed: {
			goods() {
				const {
					data
				} = this.content;
				return data.length ? data : [];
			},
			btnStyle() {
				const {
					btn_bg_color,
					btn_color,
					btn_border_radius,
					btn_border_color,
					btn_size
				} = this.styles;
				const style = {
					"background-color": btn_bg_color,
					color: btn_color,
					"border-radius": `${this.$px2rpx(btn_border_radius)}rpx`,
					"border-color": btn_border_color,
					"font-size": `${this.$px2rpx(btn_size)}rpx`,
				};
				return style;
			},
			imageTabStyleHeight() {
				var hnum = 0,
					htop = "";
				if (this.content.show_goods_code) hnum++;
				if (this.content.show_goods_model) hnum++;
				if (this.content.show_goods_stock) hnum++;
				if (this.content.show_goods_tag) hnum++;

				if (hnum > 3) {
					htop = 180;
				} else if (hnum > 2) {
					htop = 150;
				} else if (hnum > 1) {
					htop = 140;
				}

				return htop;
			},
		},
		methods: {
			navigate(item) {
				this.$Router.push({
					path: "/bundle2/pages/goods_detail/goods_detail",
					query: {
						id: item.id,
					},
				});
			},
			addCart({
				image,
				price,
				sell_price,
				member_price,
				total_stock,
				spec_type,
				spec_id,
				spec_value,
				spec_value_list,
				aux_def_id,
				aux_arr
			}) {
				if (!this.isLogin) return this.$Router.push("/bundle2/pages/login/login");

				console.log('spec_id', spec_id)
				console.log('aux_arr', aux_arr, spec_type, aux_arr.length)

				if (spec_type == 1 && aux_arr.length < 2) {

					let aux_id = 0
					if (aux_arr.length == 1) aux_id = aux_def_id

					// 处理 加入购物车
					apiCartAdd({
							item_id: spec_id,
							goods_num: 1,
							clsp_id: Cache.get('clsp_id'),
							aux_id,
						})
						.then(() => {
							this.$toast({
								title: this.$zhTran("已加入购物车"),
							});
							this.$store.dispatch("getCartNum");
						})
						.catch((err) => {
							throw new Error(err);
						});
				} else {
					this.spec_image = image
					this.spec_price = member_price != undefined ? member_price : sell_price
					this.price_key = member_price != undefined ? 'member_price' : 'sell_price'
					this.aux_def_id = aux_def_id
					this.total_stock = total_stock
					this.spec_value = spec_value
					this.spec_value_list = spec_value_list
					this.showGoodsSpec = true;
				}
			},
			// 处理 加入购物车
			handleCartAdd({
				spec,
				number,
				aux_id
			}) {
				if (!this.isLogin) return this.$Router.push("/bundle2/pages/login/login");

				apiCartAdd({
						item_id: spec.id,
						goods_num: number,
						aux_id,
						clsp_id: Cache.get('clsp_id')
					})
					.then(() => {
						this.$toast({
							title: this.$zhTran("已加入购物车"),
						});
						this.$store.dispatch("getCartNum");

						this.$emit('refreshList', {})
					})
					.catch((err) => {
						throw new Error(err);
					});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.goods-group {
		.goods-lists {
			overflow: hidden;

			.cart-icon {
				position: absolute;
				right: 10rpx;
				bottom: 0;
				width: 50rpx;
				height: 50rpx;
			}

			&.larger {
				.goods-wrap {
					.goods-item {
						.goods-info {
							padding: 10px;
						}

						.goods-image {
							padding-top: 46%;
						}

						.cart-icon {
							right: 15rpx;
							bottom: 15rpx;
						}
					}
				}
			}

			&.perline {
				display: flex;
				flex-wrap: wrap;

				.goods-wrap {
					width: 50%;

					.goods-info {
						.name {
							line-height: 36rpx;
							height: 72rpx;
						}
					}

					.cart-icon {
						bottom: 15rpx;
					}
				}
			}

			&.swiper {
				overflow-x: auto;
				overflow-y: hidden;
				display: flex;

				.goods-wrap {
					flex: 0 0 36%;
					width: 36%;

					.cart-icon {
						bottom: 15rpx;
					}
				}
			}

			&.lists {
				.goods-wrap {
					.goods-item {
						flex-direction: row;

						.goods-image {
							width: 240rpx;
							padding-top: 240rpx;
						}

						.goods-info {
							position: relative;
							padding: 10px;

							.price-btn {
								position: absolute;
								right: 20rpx;
								left: 20rpx;
								bottom: 20rpx;
							}
						}
					}

					.cart-icon {
						right: 0;
					}
				}
			}

			.goods-wrap {
				overflow: hidden;

				.goods-item {
					overflow: hidden;
					display: flex;
					flex-direction: column;
					position: relative;
					transform: translateY(0);

					.goods-image {
						position: relative;
						width: 100%;
						padding-top: 100%;
						box-sizing: border-box;

						.u-image {
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							width: 100%;
						}
					}

					.goods-info {
						flex: 1;

						.buy-btn {
							flex: none;
							@include background_color() padding: 4rpx 32rpx;
							color: #fff;
							border-radius: 4rpx;
							border: 1px solid transparent;

							&.circle {
								padding: 0;
							}
						}

						.name {
							color: #333333;
						}

						.price {
							@include font_color();
						}
					}
				}
			}
		}
	}
</style>